<template>
  <LoadPage :show="showPage"/>
  <view class="main">
    <Nav bg-color="#ffbf0f" class="nav">
      <view class="title dispaly-center">
        <view class="icon" @click="$goUrl('back')">
          <up-icon name="arrow-left" color="#fff" size="20"></up-icon>
        </view>
        <view class="ipt">
          <view class="ip-box" @click="$goUrl(`/subPackage/index/searchResult`)">
            <view class="ip-bg">
              <image src="/static/image/search-bg.png" mode="aspectFill"/>
            </view>
            <view class="input dispaly-center">
              <view class="s-icon">
                <image src="/static/image/search.png" mode="aspectFill"/>
              </view>
              <input placeholder="搜索" disabled/>
            </view>
          </view>
        </view>
      </view>
    </Nav>
    <view class="content" :style="{ marginTop: navHeight + 'px' }">
      <view class=" option">
        <view class="option-item dispaly-col-center" v-for="(item, index) in cateList" :key="index"
              @click="clickCate(item, index)">
          <view class="cover">
            <view class="cover-bg">
              <image src="/static/image/cate-border.png" mode="aspectFill"/>
            </view>
            <view class="cover-con">
              <image
                  :src="item.image"
                  mode="aspectFill"/>
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="cate">
        <view class="cate-box">
          <view class="cate-img">
            <image src="/static/image/sort-bg.png" mode="aspectFill"/>
          </view>
          <view class="sort">
            <view class="sort-item dispaly-center" v-for="(item, index) in sortList" :key="index"
                  @click="clickSort(item, index)">
              <view class="s dispaly-center">
                <view class="s-left">{{ item.name }}</view>
                <view class="s-right">
                  <image src="/static/image/sort.png" mode="aspectFill"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="product">
        <ProductList list-type="1" :data="dataList" v-if="dataList.length"/>
        <LoadMore :status="status"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {getElementHeight} from '@/utils/util'
import {ref, onMounted, reactive} from 'vue';
import ProductList from "../../components/productList/productList.vue";
import {getProductLit, productCate} from '@/api/apiList';
import {deleteObjectEmptyKey} from '@/utils/util'
import {onReachBottom, onPullDownRefresh} from "@dcloudio/uni-app";



const sortList = ref([
  {name: '时间', type: 1},
  {name: '价格', type: 2},
  {name: '收藏', type: 3},
])

const cateList = ref([])
const showPage = ref(true)
const getCateList = async () => {
  return new Promise(async (resolve, reject) => {
    const res = await productCate({type: 0})
    if (res.code == 200) {
      cateList.value = res.data
      cateList.value.unshift({name: '全部', id: '', image: '/static/all.jpg'})
      resolve('ok')
    }
  })
}

const dataList = ref([])
const queryData = reactive({
  sortName: 'create_time',
  sortValue: 'desc',
  search: '',
  categoryId: '',
  pageSize: 10,
  pageNum: 1,
  type: 0
})
const status = ref('loadmore')
const getListData = async () => {
  return new Promise(async (resolve, reject) => {
    status.value = 'loading'
    const newQuery = deleteObjectEmptyKey(queryData)
    const res = await getProductLit(newQuery)
    if (res.code == 200) {
      if (res.rows.length) {
        dataList.value = [...dataList.value, ...res.rows]
        status.value = 'loadmore'
        resolve('ok')
      } else {
        status.value = 'nomore'
        resolve('ok')
      }
    }
  })
}

// 点击排序
const clickSort = (item, index) => {
  if (item.type === 1) queryData.sortName = 'create_time'
  if (item.type === 2) queryData.sortName = 'price'
  if (item.type === 3) queryData.sortName = 'collect_num'
  if (queryData.sortValue === 'desc') {
    queryData.sortValue = 'asc'
  } else {
    queryData.sortValue = 'desc'
  }
  console.log(queryData, 'query')
  queryData.pageNum = 1
  dataList.value = []
  getListData()
}

// 点击分类
const clickCate = (item, index) => {
  queryData.categoryId = item.id
  queryData.pageNum = 1
  dataList.value = []
  getListData()
}

const init = async () => {
  const queue = [await getCateList(), await getListData()]
  const res = Promise.all(queue)
  showPage.value = false
}

// 获取元素高度
const navHeight = ref(0)
onMounted(async () => {
  const res = await getElementHeight('.nav')
  navHeight.value = res
  await init()
})

onReachBottom(() => {
  queryData.pageNum++
  getListData()
})

onPullDownRefresh(() => {
  uni.showLoading({
    title: '加载中'
  })
  queryData.categoryId = ''
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  uni.hideLoading()
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 442rpx;
.nav {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.title {
  .ipt {
    margin-left: 40rpx;

    .ip-box {
      position: relative;
      width: $i-width;
      height: $i-height;

      .ip-bg {
        image {
          width: $i-width;
          height: $i-height;
        }
      }

      .input {
        width: $i-width;
        height: $i-height;
        position: absolute;
        top: 0;
        left: 24rpx;

        .s-icon {
          height: $i-height;
          line-height: $i-height;
          padding-top: 5rpx;
          margin-right: 10rpx;

          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}

.content {
  .option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .option-item {
      margin: 13rpx 22rpx;

      .cover {
        position: relative;

        .cover-bg {
          image {
            width: 104rpx;
            height: 104rpx;
          }
        }

        .cover-con {
          position: absolute;
          top: 4rpx;
          left: 4rpx;
          right: 0;

          image {
            width: 97rpx;
            height: 97rpx;
          }
        }

        .name {
          text-align: center;
          font-family: IPix;
          font-size: 26rpx;
          color: #000000;
        }
      }
    }
  }

  .cate {
    padding: 13rpx 22rpx;

    .cate-box {
      position: relative;

      .cate-img {
        image {
          width: 100%;
          height: 78rpx;
        }
      }

      .sort {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 20%;
        right: 40rpx;

        .sort-item:last-child {
          margin-right: 0;
        }

        .sort-item {
          margin-right: 60rpx;

          .s {
            .s-left {
              font-family: IPix;
              font-size: 28rpx;
              color: #4E3B0C;
              margin-right: 10rpx;
            }

            .s-right {
              image {
                width: 22rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>